<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>组织</span>
          </div>
          <div class="block">
            <el-tree :data="departments" :props="departmentProps" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="getDepartmentUsers" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <div class="filter-container">
          <el-input v-model="queryParam.username" placeholder="用户名" clearable class="filter-item form-search-input" @keyup.enter.native="handleSearch" />
          <el-input v-model="queryParam.email" placeholder="邮箱" clearable class="filter-item form-search-input" @keyup.enter.native="handleSearch" />
          <el-select v-model="queryParam.status" clearable placeholder="请选择" class="filter-item" style="margin-right: 5px">
            <el-option value="1" label="启用" />
            <el-option value="2" label="禁用" />
          </el-select>
          <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            重置
          </el-button>
          <el-button v-action="'user@create'" class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreate">
            新增
          </el-button>
        </div>
        <el-button v-if="selectedIds.length" v-action="'user@delete'" size="small" class="filter-item mb-5" type="danger" icon="el-icon-delete" @click="handleMultiDelete">
          批量删除
        </el-button>
        <div v-loading="loading">
          <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
            <el-table-column type="selection" width="55" :selectable="selectInit" />
            <el-table-column label="用户名" align="center">
              <template slot-scope="user">{{ user.row.username }}</template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" align="center" />
            <el-table-column label="角色" prop="role_name" align="center" />
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="user">
                <el-switch v-if="user.row.id === 1" v-model="user.row.status" v-action="'user@recover'" :disabled="setPermissions()" active-text="启用" :active-value="1" />
                <el-switch v-else v-model="user.row.status" v-action="'user@switchStatus'" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="2" :disabled="setPermissions()" @change="disOrEnableUser(user.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="user">
                <el-button v-if="user.row.id === 1 || user.row.status === 1" v-action="'user@update'" type="primary" size="small" icon="el-icon-edit" disabled />
                <el-button v-else v-action="'user@update'" type="primary" icon="el-icon-edit" size="small" @click="beforeHandleUpdate(user.row)" />
                <el-button v-if="user.row.id === 1 || user.row.status === 1" v-action="'user@delete'" type="danger" size="small" icon="el-icon-delete" disabled />
                <el-button v-else v-action="'user@delete'" type="danger" icon="el-icon-delete" size="small" @click="handleDelete(user.row.id)" />
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination background class="pagination-container" :current-page="paginate.current" hide-on-single-page :page-sizes="paginate.sizes" :page-size="paginate.limit" :layout="paginate.layout" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
          <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>
    <!----------------------------------- 用户 ---------------------------------------------->
    <el-dialog :title="title" :visible.sync="formVisible" :destroy-on-close="true" width="800px" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules" label-position="right">
        <div class="filter-selection">
          <el-form-item label="昵称" :label-width="formLabelWidth" prop="username">
            <el-input v-model="formFieldsData.username" placeholder="请输入用户昵称" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="formFieldsData.email" placeholder="请输入邮箱" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="formFieldsData.password" placeholder="请输入密码" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
            <!-- <el-tree
                ref="roles"
                :data="treeRoles.data"
                show-checkbox
                node-key="id"
                :default-checked-keys="formFieldsData.roles"
                :props="treeRoles.prop"
              /> -->
            <el-select v-model="formFieldsData.role" placeholder="请选择角色" :disabled="formFieldsData.identify === 'company'">
              <el-option v-for="item in treeRoles.data" :key="item.identify" :label="item.role_name" :value="item.id" />
            </el-select>
            <!-- <el-radio-group v-model="formFieldsData.roles">
                <el-radio v-for="item in treeRoles.data" :key="item.identify" :label="item.role_name" :value="item.id" />
              </el-radio-group> -->
          </el-form-item>
          <el-form-item label="组织" :label-width="formLabelWidth" prop="department_id">
            <el-cascader v-model="formFieldsData.department_id" :options="treeDepartments.data" :props="treeDepartments.prop" :show-all-levels="false" clearable />
          </el-form-item>
          <el-form-item label="岗位" :label-width="formLabelWidth" prop="jobs">
            <el-select v-model="formFieldsData.jobs" multiple clearable placeholder="请选择岗位">
              <el-option v-for="item in selectJobs" :key="item.id" :label="item.job_name" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel()">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import formOperate from '@/layout/mixin/formOperate'
import cacheList from '@/layout/mixin/cacheList'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'SystemUser',
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 405,
      componentName: 'SystemUser',
      formName: 'users',
      // 刷新路由
      refreshRoute: true,
      departmentProps: {
        label: 'department_name'
      },
      formLabelWidth: '130px',
      // 用户搜索
      queryParam: {
        username: '',
        email: '',
        status: '',
        department_id: ''
      },
      formVisible: false,
      formFieldsData: {
        username: '',
        email: '',
        password: '',
        department_id: 0,
        jobs: [],
        role: '',
        identify: ''
      },
      url: 'users',
      data: [],
      // 部门
      treeDepartments: {
        data: [],
        default: [],
        prop: {
          label: 'department_name',
          value: 'id',
          emitPath: false,
          checkStrictly: true
        }
      },
      // 岗位
      selectJobs: [],
      // 角色
      treeRoles: {
        default: [],
        data: [],
        prop: {
          label: 'role_name'
        }
      },
      // 表单验证
      rules: {
        username: [
          { required: true, message: '请输入用户', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '邮箱地址格式不正确', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ]
      },
      // 部门
      departments: []
    }
  },
  // 初始化数据
  mounted() {
    this.$http.get('departments').then(response => {
      this.departments = response.data
    })
  },
  methods: {
    // 按钮权限
    setPermissions() {
      // console.log(this.$store.state.user.permissions)
      const permissions = this.$store.state.user.permissions
      let bol = true
      for (let i = 0; i < permissions.length; i++) {
        if (permissions[i].permission_mark === 'user@switchStatus') {
          bol = false
        }
      }
      return bol
    },
    // 获取部门用户
    getDepartmentUsers(data, node, self) {
      this.queryParam.department_id = data.id
      this.handleSearch()
    },
    // 禁用/启用 用户
    disOrEnableUser(user) {
      this.$http.put('users/switch/status/' + user.id).then(response => {
        this.$message({
          message: response.message,
          type: 'success'
        })
      })
    },
    beforeCreate() {
      this.$http.get('roles').then(response => {
        this.treeRoles.data = response.data.filter(e => e.identify !== 'admin')
      })
      this.$http.get('departments').then(response => {
        this.treeDepartments.data = response.data
      })
      this.$http.get('jobs').then(response => {
        this.selectJobs = response.data
      })
      this.formFieldsData.department_id = this.queryParam.department_id || ''
    },
    beforeHandleUpdate(user) {
      this.beforeCreate()
      this.$http.get(this.url + '/' + user.id).then(response => {
        const user = response.data
        let roleIds = ''
        let identify = ''
        const jobIds = []
        user.roles.map(item => {
          // roleIds.push(item.id)
          roleIds = item.id
          identify = item.identify
        })
        user.jobs.map(item => {
          jobIds.push(item.id)
        })
        user.role = roleIds
        user.identify = identify
        user.jobs = jobIds
        user.password = ''
        this.handleUpdate(user)
      })
    },
    handleSelectRoles() {
      this.formFieldsData.roles = [this.formFieldsData.role]
    },
    selectInit(row, index) {
      return row.id !== 1
    },
    beforeSubmit() {
      const { password } = this.formFieldsData
      if (!password) {
        delete this.formFieldsData.password
      }
    },
    submit() {
      this.handleSelectRoles()
      this.handleSubmit()
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.filter-container {
  border: none;
}
</style>
